<template>
    <div>
        <div class="information-header">
            <div>
                <p style="padding: 10px 50px 10px ;text-align: left;font-weight:bold">商店信息</p>
            </div>
        </div>
        <div class="information-content">
            <div class="photo">
                <saler-photo></saler-photo>
                <br><br>
                <!-- <p>上传头像</p>  -->
            </div>
            <div>
                <el-row>
                    <el-col :span="12">
                        <el-form ref="shopForm" :model="shopForm" :rules="shopFormRules" label-width="100px">
                            <el-form-item label="商店名称" prop="name">
                                <el-input size="large" type="textarea" :autosize="{minRows: 1,maxRows: 3}" v-model="shopForm.name" placeholder="商店名称">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="商店地址" prop="address">
                                <el-input size="large" type="textarea" :autosize="{minRows: 1,maxRows: 3}" v-model="shopForm.address" placeholder="商店地址">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="商店描述" prop="description">
                                <el-input size="large" type="textarea" :autosize="{minRows: 2,maxRows: 5}" v-model="shopForm.description" placeholder="商店描述">
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="large" type="primary" @click="handleSubmit('shopForm')">提交</el-button>
                                <el-button size="large" type="text" @click="handleReset('shopForm')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import formRules from 'mixins/formRules.js'
import uploadPhoto from 'components/uploadPhoto.vue'

export default {
  mixins: [formRules],
  components: {
    'saler-photo': uploadPhoto
  },
  data() {
    return {
      shopForm: {
        name: '',
        address: '',
        description: ''
      },
      shopFormRules: {
        name: [{ required: true, message: '请输入商店名称', trigger: 'blur' }],
        address: [{ required: true, message: '请输入商店地址', trigger: 'blur' }],
        description: [
          {
            required: true,
            message: '请描述商店',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 20,
            message: '描述不能少于20字',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit(formName) {
      this.submitForm(formName)
    },
    handleReset(formName) {
      this.resetForm(formName)
    }
  }
}
</script>

<style scoped>
/* .photo {
    height: 10px;
} */
</style>